import {
  SandpackProvider,
  SandpackLayout,
  SandpackCodeEditor,
  SandpackPreview,
  SandpackFileExplorer,
} from "@codesandbox/sandpack-react";
import type { SandpackThemeProp } from "@codesandbox/sandpack-react";
import { Card, Form, Select } from "antd";
import { useState } from "react";
import { amethyst, aquaBlue, atomDark, cobalt2, cyberpunk, dracula, ecoLight, freeCodeCampDark, githubLight, gruvboxDark, gruvboxLight, levelUp, monokaiPro, neoCyan, nightOwl, sandpackDark } from "@codesandbox/sandpack-themes";

type TemplateName = "react" | "angular" | "react-ts" | "solid" | "svelte" | "test-ts" | "vanilla-ts" | "vanilla" | "vue" | "vue-ts" | "node" | "nextjs" | "vite" | "vite-react" | "vite-vue" | "vite-svelte" | "astro";

function App() {
  const [theme, setTheme] = useState("auto");
  const [template, setTemplate] = useState<TemplateName>("react");

  const getTheme = (): SandpackThemeProp => {
    if (theme == "auto" || theme == "light" || theme == "dark") {
      return theme;
    } else if (theme == "amethyst") {
      return amethyst;
    } else if (theme == "aquaBlue") {
      return aquaBlue;
    } else if (theme == "atomDark") {
      return atomDark;
    } else if (theme == "cobalt2") {
      return cobalt2;
    } else if (theme == "cyberpunk") {
      return cyberpunk;
    } else if (theme == "dracula") {
      return dracula;
    } else if (theme == "ecoLight") {
      return ecoLight;
    } else if (theme == "freeCodeCampDark") {
      return freeCodeCampDark;
    } else if (theme == "githubLight") {
      return githubLight;
    } else if (theme == "gruvboxDark") {
      return gruvboxDark;
    } else if (theme == "gruvboxLight") {
      return gruvboxLight;
    } else if (theme == "levelUp") {
      return levelUp;
    } else if (theme == "monokaiPro") {
      return monokaiPro;
    } else if (theme == "neoCyan") {
      return neoCyan;
    } else if (theme == "nightOwl") {
      return nightOwl;
    } else if (theme == "sandpackDark") {
      return sandpackDark;
    }
    return "auto";
  };

  return (
    <Card title="sandpack" bordered={false} bodyStyle={{ padding: "0px 0px" }}
      extra={
        <Form layout="inline">
          <Form.Item label="主题">
            <Select style={{ width: "180px" }} value={theme} onChange={value => setTheme(value)}>
              <Select.Option value="auto">auto</Select.Option>
              <Select.Option value="dark">dark</Select.Option>
              <Select.Option value="light">light</Select.Option>
              <Select.Option value="amethyst">amethyst</Select.Option>
              <Select.Option value="aquaBlue">aquaBlue</Select.Option>
              <Select.Option value="atomDark">atomDark</Select.Option>
              <Select.Option value="cobalt2">cobalt2</Select.Option>
              <Select.Option value="cyberpunk">cyberpunk</Select.Option>
              <Select.Option value="dracula">dracula</Select.Option>
              <Select.Option value="ecoLight">ecoLight</Select.Option>
              <Select.Option value="freeCodeCampDark">freeCodeCampDark</Select.Option>
              <Select.Option value="githubLight">githubLight</Select.Option>
              <Select.Option value="gruvboxDark">gruvboxDark</Select.Option>
              <Select.Option value="gruvboxLight">gruvboxLight</Select.Option>
              <Select.Option value="levelUp">levelUp</Select.Option>
              <Select.Option value="monokaiPro">monokaiPro</Select.Option>
              <Select.Option value="neoCyan">neoCyan</Select.Option>
              <Select.Option value="nightOwl">nightOwl</Select.Option>
              <Select.Option value="sandpackDark">sandpackDark</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="模板">
            <Select style={{ width: "100px" }} value={template} onChange={value => setTemplate(value)}>
              <Select.Option value="react">react</Select.Option>
              <Select.Option value="angular">angular</Select.Option>
              <Select.Option value="react-ts">react-ts</Select.Option>
              <Select.Option value="solid">solid</Select.Option>
              <Select.Option value="svelte">svelte</Select.Option>
              <Select.Option value="test-ts">test-ts</Select.Option>
              <Select.Option value="vanilla-ts">vanilla-ts</Select.Option>
              <Select.Option value="vanilla">vanilla</Select.Option>
              <Select.Option value="vue">vue</Select.Option>
              <Select.Option value="vue-ts">vue-ts</Select.Option>
            </Select>
          </Form.Item>
        </Form>
      }>
      <SandpackProvider template={template} theme={getTheme()}>
        <SandpackLayout>
          <SandpackFileExplorer style={{ height: "calc(100vh - 100px)" }} />
          <SandpackCodeEditor style={{ height: "calc(100vh - 100px)" }} />
          <SandpackPreview style={{ height: "calc(100vh - 100px)" }} />
        </SandpackLayout>
      </SandpackProvider>
    </Card>
  )
}

export default App
